<!-- <template>
	<view class="chat">
		预约内容框
		<view class="adress">预约地址 :{{address}}</view>
		<view class="time">预约时间:{{workTime}}</view>
		<view class="phone">联系方式</view>
	</view>
</template> -->

	// export default {
	// 	data() {
	// 		return {
	// 			address: '',
	// 			workTime: '',
	// 			phone: ''
	// 		};
	// 	},

	// 	onLoad(options) {

	// 		this.address = options.adress;
	// 		this.workTime = options.workTime
	// 		this.phone = options.phone

	// 	},
	// }


<!-- 	.chat {
		width: 750rpx;

		.adress {
			width: 700rpx;
			height: 100rpx;
			font-size: 40rpx;
			margin-bottom: 30rpx;
			margin-top: 20rpx;

		}

		.time {
			width: 700rpx;
			height: 100rpx;
			font-size: 40rpx;
			margin-bottom: 30rpx;
		}

		.phone {
			width: 700rpx;
			height: 100rpx;
			font-size: 40rpx;
		}

	} -->



<template>
	<view class="chat">
		<!-- 聊天内容框 -->
		<view class="chat-body">
			<view class="chat-body-item" v-for="item in message" :key="item.id" :class="{active:item.isactive}">
				<image class="chat-body-avator" :src="imgurl">
				</image>
				<view class="chat-body-content">
					<span class="username">{{item.username }}</span>
					<span class="content">{{item.content}}</span>
				</view>
			</view>
		</view>
		<!-- 消息发送框 -->
		<view class="send-message">
			<input class="uni-input" @input="onKeyInput" placeholder="请输入内容" />
			<button @click="SendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserinfo
	} from '@/util/Token.js'
	// import WebSocket from '@/util/Stomp.js'
	import Stomp from 'stompjs'
	import SockJS from "sockjs-client";

	export default {
		data() {
			return {
				imgurl: this.$store.state.chat.userinfo.photoPath ||
					' https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/eaf97480-0547-41f7-bda9-330b2788a9ccimage/png',
				message: [{
						id: 1,
						username: this.$store.state.chat.userinfo.nickName,
						content: `你好啊，我是${this.$store.state.chat.userinfo.nickName}`,
						isactive: true
					},
					{
						id: 2,
						username: '蒋业忠',
						content: '你好，我是蒋业忠',
						isactive: false
					}
				],
				curentid: 3,
				CurrentMessage: '',
				accepterId: undefined, //接收者id
				senderId: undefined, //发送者Id
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				acceptname: ''

			};
		},
		// beforeCreate() {
		// 	const self = this;
		// 	uni.$on('accepname', (res) => {
		// 		console.log('11', res)
		// 	})
		// },

		onLoad(options) {
			// this.connectSocket();
			// this.init();

			this.accepterId = options.id;
			// this.acceptname = options.name
			const res = getUserinfo();
			this.senderId = JSON.parse(res).userId

			// this.getWebsocketData()
		},
		beforeDestroy() {
			// this.closeSocket();
		},
		methods: {
			getWebsocketData() {
				// 要发送的数据包
				const data = {
					"senderId": this.senderId,
					"accepterId": this.accepterId,
				}
				console.log(data)
				// 打开连接
				this.socketIo.connectSocketInit(data)
				// 接收数据
				uni.$on("getPositonsOrder", (res) => {
					this.connect = true
					const {
						Code,
						data
					} = res
					if (Code == xxxx) {
						console.log("---", data)
						// 根据后端传过来的数据进行 业务编写。。。
					} else {

					}
				})
				// 错误时做些什么
				uni.$on("connectError", () => {
					this.connect = false
					this.scoketError = true
				})
			},
			//连接
			init() {
				const websocket = new SockJS("ws://43.142.239.28:8081/chat", [], {
					transports: 'websocket'
				});
				const stompClient = Stomp.over(websocket);
				stompClient.connect({}, (res) => {
					console.log(res)
				}, (error) => {
					console.log('error', eror)
				})
			},
			onKeyInput(event) {
				this.CurrentMessage = event.target.value
			},
			//点击发送消息
			SendMessage() {
				this.message.push({
					id: this.curentid++,
					username: 'pxh',
					content: this.CurrentMessage,
					isactive: true
				})
				this.CurrentMessage = ''

				// this.CurrentMessage = ''
				// if (this.is_open_socket) {
				// 	// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
				// 	this.socketTask.send({
				// 		data: "请求一次发送一次message",
				// 		async success() {
				// 			console.log("消息发送成功");
				// 		},
				// 	});
				// }
			},
			//连接websocket
			connectSocket() {
				this.socketTask = uni.connectSocket({
					url: 'ws://43.142.239.28:8081/chat',
					success(data) {
						console.log("websock连接成功")
					}
				});
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},

			//接收消息
			onSocketMessage() {
				return new Promise((resolve, reject) => {
					uni.onSocketMessage(function(res) {
						console.log('收到服务器消息：' + res.data)
						resolve(res.data)
					});
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.chat {
		width: 750rpx;

		.chat-body {
			position: absolute;
			bottom: 120rpx;
			overflow-y: scroll;
			top: 30rpx;
			height: auto;
			width: 100%;
			padding-bottom: 100rpx;

			.chat-body-item {
				display: flex;
				flex-direction: row;
				padding: 0.5rpx;

				.chat-body-avator {
					width: 60rpx;
					height: 60rpx;
					box-shadow: 0rpx 2rpx 6rpx 1rpx #ccc;
					border-radius: 50%;
					margin-top: 2rpx;
					margin-right: 10rpx;
				}

				.chat-body-content {
					display: flex;
					flex-direction: column;
					margin: 0 1rpx 1rpx 1rpx;
					border-radius: 50%;

					.username {
						color: #5d5d5d;
						font-weight: 500;
						margin-bottom: 4rpx;
					}

					.content {
						word-break: break-word;
						width: 250rpx;
						height: auto;
						background-color: #e3e3e3;
						min-height: 100rpx;
						display: flex;
						align-items: center;
						border-radius: 20rpx;
						padding: 5rpx 10rpx;
					}
				}
			}

			// 
			.active {
				flex-direction: row-reverse;

				.chat-body-content {
					align-items: flex-end;
				}
			}
		}

		// 
		.send-message {
			position: fixed;
			bottom: 40rpx;
			left: 20rpx;
			z-index: 111;
			display: flex;

			input {
				background-color: #d8d8d8;
				width: 500rpx;
				min-height: 80rpx;
				height: auto;
				padding-left: 20rpx;
				border-radius: 15rpx;
			}

			button {
				width: 200rpx;
				height: 80rpx;
				border: none;
				font-size: 30rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 15rpx;
				color: #797979;

			}
		}
	}
</style>
